<template>
	<view class="mate-criteria">
		<!-- 基本条件卡片 -->
		<view class="criteria-card basic-card">
			<view class="card-header">
				<text class="card-title">基本条件</text>
				<text class="card-subtitle">（必填）</text>
			</view>

			<view class="card-body">
				<!-- 年龄 -->
				<view class="form-item">
					<text class="form-label">年龄</text>
					<view class="form-value">
						<input v-model="form.ageRange" placeholder="如：25-30岁" class="form-input"
							@blur="validateField('ageRange')" />
					</view>
				</view>

				<!-- 身高 -->
				<view class="form-item">
					<text class="form-label">身高</text>
					<view class="form-value">
						<input v-model="form.height" placeholder="如：160-180cm" class="form-input"
							@blur="validateField('height')" />
					</view>
				</view>

				<view class="form-item">
					<text class="form-label">体重</text>
					<view class="form-value">
						<input v-model="form.height" placeholder=" " class="form-input"
							@blur="validateField('height')" />
					</view>
				</view>

				<view class="form-item">
					<text class="form-label">学历</text>
					<view class="form-value">
						<input v-model="form.height" placeholder=" " class="form-input"
							@blur="validateField('height')" />
					</view>
				</view>

				<view class="form-item">
					<text class="form-label">房子</text>
					<view class="form-value">
						<input v-model="form.height" placeholder=" " class="form-input"
							@blur="validateField('height')" />
					</view>
				</view>

				<view class="form-item">
					<text class="form-label">车子</text>
					<view class="form-value">
						<input v-model="form.height" placeholder=" " class="form-input"
							@blur="validateField('height')" />
					</view>
				</view>

				<!-- 所在地区 -->
				<view class="form-item" @click="showLocationPicker = true">
					<text class="form-label">所在地区</text>
					<view class="form-value">
						<text class="form-text" :class="{ 'placeholder': !form.location  }">
							{{ form.location }}
						</text>
						<u-icon name="arrow-right" size="14"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 地区选择器 -->
		<view class="location-picker" v-if="showLocationPicker">
			<view class="picker-header">
				<text class="picker-cancel" @click="showLocationPicker = false">取消</text>
				<text class="picker-title">选择地区</text>
				<text class="picker-confirm" @click="handleLocationConfirm">确定</text>
			</view>
			<picker-view class="picker-body" :value="pickerIndex" @change="handlePickerChange">
				<picker-view-column>
					<view class="picker-item" v-for="(item, index) in locationData[0]" :key="index">
						{{ item.name  }}
					</view>
				</picker-view-column>
			</picker-view>
		</view>

		<!-- 提交按钮 -->
		<view class="footer-btn">
			<button class="submit-btn" @click="submitForm" :disabled="submitting">
				<text v-if="!submitting">保存标准</text>
				<text v-else class="loading-text">保存中...</text>
			</button>
		</view>
	</view>
</template>

<script>
	// 模拟数据 
	const locationData = [
		[{
				name: "北京"
			},
			{
				name: "上海"
			},
			{
				name: "广州"
			},
			{
				name: "深圳"
			},
			{
				name: "杭州"
			}
		]
	];

	export default {
		data() {
			return {
				userGender: 'male', // 从全局状态获取实际用户性别 
				showLocationPicker: false,
				locationData,
				pickerIndex: [0],
				selectedLocation: null,
				submitting: false,
				form: {
					gender: '', // 自动反选 
					ageRange: '', // 如 "25-30"
					height: '', // 如 "160-180"
					location: '', // 地区 
					education: '', // 学历 
					income: '', // 收入 
					marriage: '', // 婚姻状况 
					hobbies: [], // 兴趣爱好 
					remark: '' // 补充说明 
				},
				educationOptions: [{
						value: 'high-school',
						label: '高中及以下'
					},
					{
						value: 'college',
						label: '大专'
					},
					{
						value: 'bachelor',
						label: '本科'
					},
					{
						value: 'master',
						label: '硕士'
					},
					{
						value: 'phd',
						label: '博士'
					}
				],
				incomeOptions: [{
						value: '0-10',
						label: '10万以下'
					},
					{
						value: '10-20',
						label: '10-20万'
					},
					{
						value: '20-50',
						label: '20-50万'
					},
					{
						value: '50+',
						label: '50万以上'
					}
				],
				marriageOptions: [{
						value: 'single',
						label: '未婚'
					},
					{
						value: 'divorced',
						label: '离异'
					},
					{
						value: 'widowed',
						label: '丧偶'
					},
					{
						value: 'any',
						label: '不限'
					}
				],
				hobbyOptions: [
					'运动健身', '读书', '旅行', '美食', '电影',
					'音乐', '摄影', '宠物', '游戏', '艺术'
				]
			};
		},
		created() {
			this.loadCriteria();
			// 自动设置异性选项 
			this.form.gender = this.userGender === 'male' ? 'female' : 'male';
		},
		methods: {
			// 加载已有标准 
			async loadCriteria() {
				const res = await this.$u.api.getMateCriteria();
				if (res) this.form = res;
			},
			// 地区选择 
			handlePickerChange(e) {
				this.pickerIndex = e.detail.value;
			},
			handleLocationConfirm() {
				const selectedIndex = this.pickerIndex[0];
				this.form.location = this.locationData[0][selectedIndex].name;
				this.showLocationPicker = false;
			},
			// 学历选择 
			handleEducationChange(e) {
				this.form.education = this.educationOptions[e.detail.value].value;
			},
			// 收入选择 
			handleIncomeChange(e) {
				this.form.income = this.incomeOptions[e.detail.value].value;
			},
			// 婚姻状况选择 
			handleMarriageChange(e) {
				this.form.marriage = this.marriageOptions[e.detail.value].value;
			},
			// 兴趣爱好切换 
			toggleHobby(hobby) {
				if (this.form.hobbies.includes(hobby)) {
					this.form.hobbies = this.form.hobbies.filter(item => item !== hobby);
				} else {
					this.form.hobbies = [...this.form.hobbies, hobby];
				}
			},
			// 获取选项标签 
			getLabel(options, value) {
				const option = options.find(item => item.value === value);
				return option ? option.label : '';
			},
			// 验证字段 
			validateField(field) {
				if (field === 'ageRange' && !/^\d{1,2}-\d{1,2}$/.test(this.form.ageRange)) {
					uni.showToast({
						title: '格式如：25-30',
						icon: 'none'
					});
				}
				if (field === 'height' && !/^\d{2,3}-\d{2,3}$/.test(this.form.height)) {
					uni.showToast({
						title: '格式如：160-180',
						icon: 'none'
					});
				}
			},
			// 提交表单 
			async submitForm() {
				// 验证必填字段 
				if (!this.form.ageRange || !/^\d{1,2}-\d{1,2}$/.test(this.form.ageRange)) {
					uni.showToast({
						title: '请填写正确的年龄范围',
						icon: 'none'
					});
					return;
				}
				if (!this.form.height || !/^\d{2,3}-\d{2,3}$/.test(this.form.height)) {
					uni.showToast({
						title: '请填写正确的身高要求',
						icon: 'none'
					});
					return;
				}
				if (!this.form.location) {
					uni.showToast({
						title: '请选择地区',
						icon: 'none'
					});
					return;
				}

				try {
					this.submitting = true;
					await this.$u.api.saveMateCriteria(this.form);
					uni.showToast({
						title: '保存成功'
					});

					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} catch (error) {
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					});
				} finally {
					this.submitting = false;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.mate-criteria {
		background-color: #f5f7fa;
		min-height: 100vh;
		padding-bottom: 110rpx;

		// 自定义导航栏 
		.custom-navbar {
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			background-color: #fff;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

			.navbar-left {
				.icon {
					font-size: 40rpx;
					color: #333;
				}
			}

			.navbar-title {
				font-size: 34rpx;
				font-weight: 500;
				color: #333;
			}

			.navbar-right {
				width: 40rpx;
			}
		}

		// 卡片通用样式 
		.criteria-card {
			background-color: #fff;
			border-radius: 20rpx;
			margin: 24rpx;
			padding: 0 0 20rpx;
			box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.04);

			&.basic-card {
				border-top: 8rpx solid #2979ff;
			}

			&.other-card {
				border-top: 8rpx solid #ff9800;
				margin-top: 32rpx;
			}

			.card-header {
				padding: 28rpx 30rpx;
				border-bottom: 1rpx solid #f5f5f5;

				.card-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
				}

				.card-subtitle {
					font-size: 24rpx;
					color: #999;
					margin-left: 12rpx;
				}
			}

			.card-body {
				padding: 0 30rpx;
			}
		}

		// 表单项样式 
		.form-item {
			padding: 22rpx 0;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}

			.form-label {
				font-size: 28rpx;
				color: #333;
				width: 180rpx;
				flex-shrink: 0;
			}

			.form-value {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.form-input,
				.form-text {
					font-size: 28rpx;
					color: #333;
					text-align: right;
					padding: 6rpx 0;
					width: 100%;
				}

				.form-text.placeholder {
					color: #999;
				}

				.icon {
					margin-left: 16rpx;
					color: #999;
					font-size: 28rpx;
				}
			}

			// 兴趣爱好特殊样式 
			&.hobbies-item {
				flex-direction: column;
				align-items: flex-start;
				padding: 28rpx 0;

				.hobbies-container {
					width: 100%;
					display: flex;
					margin-top: 20rpx;

					.hobbies-column {
						flex: 1;

						&:first-child {
							padding-right: 20rpx;
						}

						.hobby-option {
							display: flex;
							align-items: center;
							margin-bottom: 24rpx;

							.hobby-checkbox {
								width: 36rpx;
								height: 36rpx;
								border: 1rpx solid #ddd;
								border-radius: 6rpx;
								margin-right: 16rpx;
								display: flex;
								align-items: center;
								justify-content: center;

								&.checked {
									background-color: #2979ff;
									border-color: #2979ff;

									.check-icon {
										color: #fff;
										font-size: 24rpx;
									}
								}
							}

							.hobby-label {
								font-size: 26rpx;
								color: #333;
							}
						}
					}
				}
			}

			// 文本域样式 
			.form-textarea {
				width: 100%;
				height: 160rpx;
				background-color: #f7f8fa;
				border-radius: 12rpx;
				padding: 20rpx;
				font-size: 28rpx;
				color: #333;
				margin-top: 16rpx;
			}
		}

		// 地区选择器 
		.location-picker {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			z-index: 100;
			border-radius: 24rpx 24rpx 0 0;
			box-shadow: 0 -6rpx 20rpx rgba(0, 0, 0, 0.1);

			.picker-header {
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				border-bottom: 1rpx solid #f5f5f5;

				.picker-cancel,
				.picker-confirm {
					font-size: 30rpx;
				}

				.picker-cancel {
					color: #999;
				}

				.picker-confirm {
					color: #2979ff;
				}

				.picker-title {
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
				}
			}

			.picker-body {
				height: 400rpx;

				.picker-item {
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					color: #333;
				}
			}
		}

		// 提交按钮 
		.footer-btn {
			position: fixed;
			bottom: 20rpx;
			left: 30rpx;
			right: 30rpx;

			.submit-btn {
				height: 88rpx;
				border-radius: 44rpx;
				background: linear-gradient(to right, #2979ff, #00bcd4);
				color: #fff;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: none;
				box-shadow: 0 6rpx 16rpx rgba(41, 121, 255, 0.3);
				transition: all 0.3s;

				&:active {
					transform: translateY(2rpx);
					box-shadow: 0 4rpx 8rpx rgba(41, 121, 255, 0.3);
				}

				&[disabled] {
					opacity: 0.7;
				}

				.loading-text {
					display: flex;
					align-items: center;

					&::after {
						content: "...";
						display: inline-block;
						width: 40rpx;
						overflow: hidden;
						vertical-align: bottom;
						animation: ellipsis 1.5s infinite steps(4, end);
					}
				}
			}
		}
	}

	@keyframes ellipsis {
		0% {
			width: 0;
		}

		100% {
			width: 40rpx;
		}
	}
</style>